<template>
  <v-layout class="rounded rounded-md border">
    <v-navigation-drawer>
      <v-card class="pa-4">
        <v-card-title>Navigation drawer</v-card-title>
        <v-card-subtitle>Subtitle</v-card-subtitle>
        <v-card-text>
          This is a simple navigation drawer example using Vuetify.
        </v-card-text>
      </v-card>
      <v-divider></v-divider>
      <v-list nav>
        <v-list-item title="实时简况" to="/" link>
          <template v-slot:prepend>
            <v-icon>mdi-skype-business</v-icon>
          </template>
        </v-list-item>
        <v-list-item title="工作笔记" to="/notes" link>
          <template v-slot:prepend>
            <v-icon>mdi-notebook</v-icon>
          </template>
        </v-list-item>
        <v-list-item title="财经日志" to="/finance-log" link>
          <template v-slot:prepend>
            <v-icon>mdi-currency-btc</v-icon>
          </template>
        </v-list-item>
        <v-list-item title="监控任务" to="/finance-task" link>
          <template v-slot:prepend>
            <v-icon>mdi-cash-check</v-icon>
          </template>
        </v-list-item>
        <v-list-item title="我的关注" to="/follow">
          <template v-slot:prepend>
            <v-icon>mdi-star</v-icon>
          </template>
        </v-list-item>
        <!-- <v-list-item title="Navigation drawer" link></v-list-item>
        <v-list-item title="Navigation drawer" link></v-list-item>
        <v-list-item title="Navigation drawer" link></v-list-item> -->
      </v-list>
    </v-navigation-drawer>

    <v-app-bar title="Application bar"></v-app-bar>

    <v-main  
      class="overflow-auto c-main "
      style="max-height: 85%;">
        <router-view />
    </v-main>
  </v-layout>
</template>
<script lang="ts" setup>
  //
</script>

<style scoped>
  /* Add your styles here */
  .rounded {
    border-radius: 8px;
  }
  .c-main {
    margin: 10px 0 0 10px;
  }
</style>